async function render() {
  const res = await axios.get("/dashboard");
  const data = res.data.data;

  console.log(data);

  //表单及用户名数据渲染

  overviewRender(data);
  //2022全学科薪资走势 数据图表渲染

  allSubjectSalary(data);
  //班级薪资分布 数据图表渲染

  pieSalaryDistribution(data);
  //班级每组薪资 数据图表渲染
  document.querySelector("#btns").addEventListener("click", function (e) {
    if (e.target.tagName === "BUTTON") {
      document.querySelector(".btn-blue").classList.remove("btn-blue");
      e.target.classList.add("btn-blue");
      const index = e.target.innerHTML;
      groupSalary(index);
    }
  });

  groupSalary(data);

  //男女薪资分布 数据图表渲染

  genderSalary(data);

  //籍贯分布

  renderProvince(data);
}
render();
function overviewRender(data) {
  data.overview["username"] = localStorage.getItem("username");

  const overviewKeys = Object.keys(data.overview);
  overviewKeys.forEach((key) => {
    document.querySelector(`.${key}`).innerHTML = data.overview[key];
  });
}

function allSubjectSalary(data) {
  const myChart = echarts.init(document.querySelector("#line"));
  const option = {
    title: {
      text: "2022全学科薪资走势",
      top: 15,
      left: 18,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: data.year.map((item) => item.month),
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: data.year.map((item) => item.salary),
        type: "line",
        smooth: true,
        lineStyle: {
          width: 5,
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            t2: 0,
            colorStops: [
              {
                offset: 0,
                color: "#479dee",
              },
              { offset: 1, color: "#5c75f0" },
            ],
            global: false,
          },
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: "#b2d7f7" },
              { offset: 1, color: "rgba(255,255,255,0)" },
            ],
            global: false,
          },
        },
      },
    ],
  };
  myChart.setOption(option);
}

function pieSalaryDistribution(data) {
  const myChart = echarts.init(document.querySelector("#salary"));
  const option = {
    title: {
      text: "班级薪资分布",
      top: 15,
      left: 18,
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      bottom: "5%",
      left: "center",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["60%", "71%"],
        avoidLabelOverlap: false,
        padAngle: 2,
        itemStyle: {
          borderRadius: 8,
        },
        label: {
          show: false,
          position: "center",
        },

        labelLine: {
          show: false,
        },
        data: data.salaryData.map((item) => {
          return { value: item.g_count + item.b_count, name: item.label };
        }),
      },
    ],
  };
  myChart.setOption(option);
}

function groupSalary(data, index = 1) {
  const myChart = echarts.init(document.querySelector("#lines"));

  const option = {
    tooltip: {},
    grid: {
      left: 70,
      top: 30,
      right: 30,
      bottom: 50,
    },
    xAxis: [
      {
        type: "category",
        data: data.groupData[index].map((item) => item.name),
        axisLine: {
          lineStyle: {
            color: "#ccc",
            type: "dashed",
          },
        },
        axisLabel: {
          color: "#999",
        },
      },
    ],
    yAxis: {
      type: "value",
      splitLine: {
        lineStyle: {
          type: "dashed",
        },
      },
    },

    series: [
      {
        name: "期望薪资",
        data: data.groupData[index].map((item) => item.hope_salary),
        // data: groupData[1].map(v => v.hope_salary),
        type: "bar",
        // 柱状图的样式
        itemStyle: {
          // 柱状图的颜色
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#34D39A", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(52,211,154,0.2)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
      {
        name: "实际薪资",
        data: data.groupData[index].map((item) => item.salary),
        // data: groupData[1].map(v => v.salary),
        type: "bar",
        // 柱状图的样式
        itemStyle: {
          // 柱状图的颜色
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#499FEE", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(73,159,238,0.2)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  };
  myChart.setOption(option);
}

function genderSalary(data) {
  const myChart = echarts.init(document.querySelector("#gender"));
  const option = {
    tooltip: {
      trigger: "item",
    },
    color: ["#fda224", "#5097ff", "#3abcfa", "#34d39a"],
    title: [
      {
        text: "男女薪资分布",
        left: 10,
        top: 10,
        textStyle: {
          fontSize: 16,
        },
      },
      {
        text: "男生",
        left: "50%",
        top: "45%",
        textStyle: {
          fontSize: 12,
        },
        textAlign: "center",
      },
      {
        text: "女生",
        left: "50%",
        top: "85%",
        textStyle: {
          fontSize: 12,
        },
        textAlign: "center",
      },
    ],
    series: [
      {
        type: "pie",
        radius: ["20%", "30%"],
        center: ["50%", "30%"],
        data: data.salaryData.map((item) => {
          return { value: item.b_count, name: item.label };
        }),
      },
      {
        type: "pie",
        radius: ["20%", "30%"],
        center: ["50%", "70%"],
        data: data.salaryData.map((item) => {
          return { value: item.g_count, name: item.label };
        }),
      },
    ],
  };
  myChart.setOption(option);
}

function renderProvince(data) {
  const dom = document.querySelector("#map");
  const myEchart = echarts.init(dom);
  const dataList = [
    { name: "南海诸岛", value: 0 },
    { name: "北京", value: 0 },
    { name: "天津", value: 0 },
    { name: "上海", value: 0 },
    { name: "重庆", value: 0 },
    { name: "河北", value: 0 },
    { name: "河南", value: 0 },
    { name: "云南", value: 0 },
    { name: "辽宁", value: 0 },
    { name: "黑龙江", value: 0 },
    { name: "湖南", value: 0 },
    { name: "安徽", value: 0 },
    { name: "山东", value: 0 },
    { name: "新疆", value: 0 },
    { name: "江苏", value: 0 },
    { name: "浙江", value: 0 },
    { name: "江西", value: 0 },
    { name: "湖北", value: 0 },
    { name: "广西", value: 0 },
    { name: "甘肃", value: 0 },
    { name: "山西", value: 0 },
    { name: "内蒙古", value: 0 },
    { name: "陕西", value: 0 },
    { name: "吉林", value: 0 },
    { name: "福建", value: 0 },
    { name: "贵州", value: 0 },
    { name: "广东", value: 0 },
    { name: "青海", value: 0 },
    { name: "西藏", value: 0 },
    { name: "四川", value: 0 },
    { name: "宁夏", value: 0 },
    { name: "海南", value: 0 },
    { name: "台湾", value: 0 },
    { name: "香港", value: 0 },
    { name: "澳门", value: 0 },
  ];
  for (let i = 0; i < dataList.length; i++) {
    for (let j = 0; j < data.provinceData.length; j++) {
      const element = data.provinceData[j];
      if (element.name.includes(dataList[i].name)) {
        dataList[i].value = element.value;
        break;
      }
    }
  }

  const option = {
    title: {
      text: "籍贯分布",
      top: 10,
      left: 10,
      textStyle: {
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: "item",
      formatter: "{b}: {c} 位学员",
      borderColor: "transparent",
      backgroundColor: "rgba(0,0,0,0.5)",
      textStyle: {
        color: "#fff",
      },
    },
    visualMap: {
      min: 0,
      max: 6,
      left: "left",
      bottom: "20",
      text: ["6", "0"],
      inRange: {
        color: ["#ffffff", "#0075F0"],
      },
      show: true,
      left: 40,
    },
    geo: {
      map: "china",
      roam: false,
      zoom: 1.0,
      label: {
        normal: {
          show: true,
          fontSize: "10",
          color: "rgba(0,0,0,0.7)",
        },
      },
      itemStyle: {
        normal: {
          borderColor: "rgba(0, 0, 0, 0.2)",
          color: "#e0ffff",
        },
        emphasis: {
          areaColor: "#34D39A",
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
    series: [
      {
        name: "籍贯分布",
        type: "map",
        geoIndex: 0,
        data: dataList,
      },
    ],
  };
  myEchart.setOption(option);
}
